<template>
  <div id="lanlv">
    <div class="img">
      <img src="../assets/lanlv1.png" alt="">
    </div>
    <div class="shopping">
      <p>购买商品</p>
    </div>
    <div class="xuan">
      <p>蓝牙连接</p>
      <p>氛围灯设置</p>
    </div>
    <div class="bottom">
      <img src="../assets/lanlv2.png" alt="">
    </div>
  </div>
</template>

<script>
export default {
  name: 'lanlv'
}
</script>

<style lang='scss' scoped>
#lanlv{
  width: 100%;
  height: 100%;
  background-color: #fff;
  .img{
    height: 100.53vw;
    img{
      width: 100%;
      height: 100%;
    }
  }
  .shopping{
    height: 20.26vw;
    display: flex;
    align-items: center;
    justify-content: center;
    p{
      width: 93.06vw;
      height: 12.26vw;
      background:rgba(10,109,255,1);
      border-radius: 0.8vw;
      text-align: center;
      line-height: 12.26vw;
      font-size: 4.53vw;
      font-family:SourceHanSansCN-Normal;
      font-weight:400;
      color:rgba(255,255,255,1);
    }
  }
  .xuan{
    padding: 0 3.46vw;
    height: 13.06vw;
    display: flex;
    justify-content: space-between;
    p{
      width: 44.53vw;
      background:rgba(242,242,242,1);
      border-radius:6px;
      text-align: center;
      line-height: 13.06vw;
    }
  }
  .bottom{
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 31.2vw;
    display: flex;
    justify-content: center;
    align-items: center;
    img{
      width: 35.73vw;
      height: 14.53vw;
    }
  }
}
</style>
